<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>订单中心-家政网</title>
    <meta name="keywords" content="订单中心">
    <meta name="description" content="订单中心">
    <meta name="applicable-device" content="pc"/>
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="mobile-agent" content="format=html5;url="/>
    <link rel="alternate" media="only screen and(max-width: 750px)" href=""/>
    <link rel="canonical" href="">
    <link rel="stylesheet" th:href="@{/computer/css/main.css}">
    <link rel="icon" th:href="@{/computer/images/icon.icon}" type="images/x-icon">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"/>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
</head>
<body>
<!-- 头部 -->
<header>
    <div id="cont_header" class="dingwei">
        <div class="header_left">
            <div class="dingwei_img"><img th:src="@{/computer/images/定位.png}" width="20px" height="20px"></div>
            <div class="header_city">
                <ul>
                    <li style="margin-left: 6px"><a href="./city.html">深圳</a></li>
                    <li><a href="./city.html">[北京</a></li>
                    <li><a href="./city.html">上海</a></li>
                    <li><a href="./city.html">广州</a></li>
                    <li class="more_city" style="width: 70px">
                        <a href="./city.html">更多城市]</a>
                        <ul class="more_city_list fl">
                            <li><a href="./city.html">天津</a></li>
                            <li><a href="./city.html">成都</a></li>
                            <li><a href="./city.html">杭州</a></li>
                            <li><a href="./city.html">武汉</a></li>
                            <li><a href="./city.html">重庆</a></li>
                            <li><a href="./city.html">南京</a></li>
                            <li><a href="./city.html">苏州</a></li>
                            <li><a href="./city.html">西安</a></li>
                            <li><a href="./city.html">长沙</a></li>
                            <li><a href="./city.html">沈阳</a></li>
                            <li><a href="./city.html">青岛</a></li>
                            <li><a href="./city.html">郑州</a></li>
                            <li><a href="./city.html">大连</a></li>
                            <li><a href="./city.html">东莞</a></li>
                            <li><a href="./city.html">宁波</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="logins fl">
            <ul>
                <li><a href="/user/tomyuserinfo">我的账户</a></li>
                <li><a href="./about.html">帮助中心</a></li>
                <li><span>服务电话：400-646-641</span></li>
                <li><a href="./about.html">投诉建议</a></li>
                <li class="weixin">
                    <a href="#">官方微信v
                        <div class="wx_img">
                            <img th:src="@{/computer/images/wechat.png}" width="150px" height="150px" alt="微信二维码">
                        </div>
                    </a>
                </li>
                <li class="weixin">
                    <a href="#">APP下载v
                        <div class="wx_img">
                            <img th:src="@{/computer/images/wechat.png}" width="150px" height="150px" alt="微信二维码">
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</header>
<!-- logo -->
<div class="logo wh">
    <div class="fl">
        <a href="./index.html" class="logo_content">
            <img th:src="@{/computer/images/logo.jpg}" alt="家政网" title="家政网">
            <span class="logo_text fl">
                    <p>家政网</p>
                    <p>你的私人管家</p>
                </span>
        </a>
    </div>
    <div class="searh fl">
        <select name="slt_value" id="">
            <option value="1">服务</option>
            <option value="2">师傅</option>
            <option value="3">公司</option>
            <option value="4">阿姨</option>
        </select>
        <input type="text" name="" id="" class="searh_text" placeholder="输入要查找的阿姨、服务、公司"
               onfocus="javascript:if(this.value=='请输入内容')this.value=''; ">
        <input type="button" name="" id="" value="查找" class="subimt">
        <div class="clfiex reSearh_Text">
            <span>大家都在搜:</span>
            <a href="">保姆</a>
            <a href="">钟点工</a>
            <a href="">做饭阿姨</a>
            <a href="">接送</a>
            <a href="">保洁</a>
        </div>
    </div>
</div>
<!-- 导航 -->
<nav>
    <div class="wh clfiex mgc nav_box" id="nav">
        <ul class="nav_ul">
            <li class="first_navli first_more">
                <a href="">服务大全
                    <span class="more_img"></span>
                </a>
                <!-- 下拉菜单 -->
                <div class="more_box">
                    <ul>
                        <li class="item_list">
                            <div class="more_type"><a href="">家政</a></div>
                            <div class="more_list_child">
                                <div class="sub_list">
                                    <a href="">保洁</a>
                                    <a href="">日常保洁</a>
                                    <a href="">深度保洁</a>
                                    <a href="">客厅深洁</a>
                                </div>
                                <div class="more_sub_list">
                                    <a href="">保洁</a>
                                    <a href="">日常保洁</a>
                                    <a href="">深度保洁</a>
                                    <a href="">深洁</a>
                                    <a href="">深度保洁</a>
                                    <a href="">深洁</a>
                                    <a href="">深度保洁</a>
                                    <a href="">客厅保洁</a>
                                </div>
                            </div>
                        </li>
                        <li class="item_list">
                            <div class="more_type">
                                <a href=""><span>保姆</span> <span>月嫂</span></a>
                            </div>
                            <div class="more_list_child">
                                <div class="sub_list">
                                    <a href="">保洁</a>
                                    <a href="">钟点阿姨</a>
                                    <a href="">深度保洁</a>
                                    <a href="">深洁</a>
                                </div>
                                <div>
                                </div>
                            </div>
                        </li>
                        <li class="item_list">
                            <div class="more_type"><a href="">家政</a></div>
                            <div class="more_list_child">
                                <div class="sub_list">
                                    <a href="">保洁</a>
                                    <a href="">日常保洁</a>
                                    <a href="">深度保洁</a>
                                    <a href="">深洁</a>
                                </div>
                            </div>
                        </li>
                        <li class="item_list">
                            <div class="more_type"><a href=""><span>上门</span> <span>安装</span></a></div>
                            <div class="more_list_child">
                                <div class="sub_list">
                                    <a href="">空调</a>
                                    <a href="">油烟机</a>
                                    <a href="">水电</a>
                                    <a href="">门窗</a>
                                    <a href="">橱柜</a>
                                </div>
                                <div class="more_sub_list">
                                    <a href="">卫浴</a>
                                    <a href="">抽风机</a>
                                </div>
                            </div>
                        </li>
                        <li class="item_list">
                            <div class="more_type"><a href="">家政</a></div>
                            <div class="more_list_child">
                                <div class="sub_list">
                                    <a href="">保洁</a>
                                    <a href="">日常保洁</a>
                                    <a href="">深度保洁</a>
                                    <a href="">深洁</a>
                                </div>
                            </div>
                        </li>
                        <li class="item_list">
                            <div class="more_type"><a href="">家政</a></div>
                            <div class="more_list_child">
                                <div class="sub_list">
                                    <a href="">保洁</a>
                                    <a href="">日常保洁</a>
                                    <a href="">深度保洁</a>
                                    <a href="">深洁</a>
                                </div>
                            </div>
                        </li>
                        <li class="item_list">
                            <div class="more_type"><a href=""><span>配送</span><span>服务</span></a></div>
                            <div class="more_list_child">
                                <div class="sub_list">
                                    <a href="">鲜花</a>
                                    <a href="">桶装水</a>
                                    <a href="">饮料酒水</a>
                                    <a href="">煤气</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a href="">组合套餐</a></li>
            <li><a href="">VIP专享</a></li>
            <li><a href="">上门安装</a></li>
            <li><a href="">定制服务</a></li>
            <li class="first_navli">
                <a href="">知识课堂<span class="more_img"></span></a>
                <div class="class_more">
                    <ul>
                        <li><a href="">育儿知识</a></li>
                        <li><a href="">维修知识</a></li>
                        <li><a href="">安装教程</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="">领优惠券</a></li>
            <li><a href="">大客户</a></li>
        </ul>
    </div>
</nav>
<!-- 面包屑 -->
<div class="crumbs wh mgc">
    <div class="crumbs-box">
        <li><a href="">家政网&nbsp;&gt;&gt;</a></li>
        <li>
            <h1>我的订单</h1>
        </li>
    </div>
</div>
<h2 class="order-h2 wh mgc">订单基本信息</h2>
<!-- 订单基本信息 -->
<div class="order wh mgc">
    <!-- 订单头部信息 -->
    <div class="order-title">
        <span class="title-1"><em class="checkall"><input type="checkbox" name="" id="checkall"></em>全选</span>
        <span class="title-3">商品名称</span>
        <span class="title-1">商品单价</span>
        <span class="title-1">数量</span>
        <span class="title-1">小计(元)</span>
        <span class="title-1">服务商</span>
        <span class="title-1">删除</span>
    </div>
    <ul class="order-list">
        <li class="order-list-item" th:each="cart:${carts}">
            <div class="order-list-item-5">
                <div class="check-box"><input type="checkbox" class="chebox selAlone" name="check" th:id="${cart.id}"></div>
                <img src="/computer/images/order-listimg.jpg"th:src="@{${cart.server.image}}" alt="">
                <span th:text="${cart.server.title}">家用空调安装，5年专业安装经验服务3服务装经验服务3服务装经验服务3服务</span>
                <input type="hidden"class="sdid" th:value="${cart.sdid}">
                <input type="hidden"class="cid" th:value="${cart.id}">
            </div>
            <div class="order-list-item-1"><span id="price"  class="price"th:text="${cart.server.price}">100</span></div>
            <div class="addlist order-list-item-1">
                <span  class="minus">-</span>
                <input th:value="${cart.count}" id="count" type="text" value="1" class="buyNub">
                <span  class="add">+</span>
            </div>
            <div class="order-list-item-1">
                <span id="totalprice" th:text="${cart.totalprice}" class="subtotal"th>0.00</span>
            </div>
            <div class="order-list-item-1"><span th:text="${cart.serverPerson.sername}">李师傅</span></div>
            <div class="order-list-item-2">
                <button  style="margin-top:30px" type="button" name="" class="layui-btn layui-btn-danger" th:onclick="|deleteCart(${cart.id} )|">删除</button>
            </div>
        </li>
    </ul>
    <script>

        $(function () {
            //全选功能
            $("#checkall").click(function () {
                $(".selAlone").prop("checked", $("#checkall").is(":checked"));
            });
            $(".selAlone").click(function () {
                var flag = $(".selAlone:checked").length == $(".selAlone").length;
                $("#checkall").prop("checked", flag);
            });

        })


        function deleteCart(cid){
            $.ajax({
                dataType: "json",
                type: "get",
                data: {cid: cid},
                url: "/deletecart",
                success: function (backVal) {
                    if (backVal.code == 0) {
                        layer.msg("删除成功",{
                            icon: 1,
                            time: 1000
                        },function(){
                            window.location.href="/showcarts"
                        })

                    }
                }
            })



        }

        //获取选中的复选框的id值并存入数组
        var check_list = [];
        function submitOrder(){
            var province=$("#province").val();
            var city=$("#city").val();
            var county=$("#county").val();
            var details=$("#details").val();
            var tel  = $(".sub-tel").text().split("：")[1];
            var date = $(".sub-date").text().split("：")[1];
            var name = $(".sub-name").text().split("：")[1];


            $('input[name=check]:checked').each(function () {
                if (this.checked) {
                    check_list.push(this.id);
                }
            });

            if (confirm("您确认要提交订单吗？")) {

                $.ajax({
                    type: "post",
                    url: "/suborder",
                    dataType: "json",
                    data: {
                        list: check_list,
                        province:province,
                        city:city,
                        county:county,
                        detail:details,
                        username: name ,
                        phone:  tel,
                        totalprice:$("#ttprice").text().split("元")[0],
                        time: date
                    },
                    //传递数组
                    traditional: true,
                    success: function (backVal) {
                        check_list.length = 0;
                        alert("订单提交成功");
                        if (backVal.code == 0) {
                            window.location.reload();
                        }

                    },
                    error: function (backVal) {
                        alert("对不起，订单提交失败");
                    }

                });
            } else {
                check_list.length = 0;
            }

        }
    </script>
    <!-- 订单统计 -->
    <div class="order-count wh mgc">
        <div class="order-count-box fr" id="oder-count-box">
            <span class="count-total">合计:</span>
            <span class="count-number">0个</span>
            <span class="count-price" id="ttprice">0元</span>
        </div>
    </div>
</div>
<h2 class="order-h2 wh mgc">个人信息
    <div class="line"></div>
</h2>
<!-- 个人信息 -->
<div class="order-user wh mgc">
    <form autocomplete="on">
        <li>
            <div class="order-user-add">
                <span>联系地址：</span>
                <input type="text" value="" placeholder="xxx省/市/自治区" class="info-adds" autocomplete="on" id="province">
                <input type="text" value="" placeholder="xxx市" class="info-adds" autocomplete="on" id="city">
                <input type="text" value="" placeholder="xxx区" class="info-adds" autocomplete="on" id="county">
                <input type="text" value="" placeholder="街道地址" class="info-adds street" autocomplete="on" id="details">
            </div>
        </li>
        <li>
            <div class="order-user-add">
                <span>预约时间：</span>
                <!-- <input type="text" value="" placeholder="2019年1月4日" class="info-times" autocomplete="on"> -->
                <input type="date" class="info-times" autocomplete="on">
            </div>
        </li>
        <li>
            <div class="order-user-add">
                <span>联系电话：</span>
                <!-- <input type="text" value=""  class="info-tel" autocomplete="on"> -->
                <input type="tel" value=""  class="info-tel" autocomplete="on">

            </div>
        </li>
        <li>
            <div class="order-user-add">
                <span>称呼：</span>
                <input type="text" value="" class="info-name" autocomplete="on">
            </div>
        </li>
    </form>
    <div class="order-user-btn">
        <input type="button" value="确定" onclick="submitInfo()">
    </div>
</div>
<!-- 确认订单和提交 -->
<div class="order-submit wh mgc">
    <div class="order-info fr">
        <p class="sub-adds"></p>
        <p class="sub-date"></p>
        <p class="sub-name"></p>
        <p class="sub-tel"></p>
        <p class="order-info-price">
            <span class="sub-price"></span>
            <input type="button" onclick="submitOrder()" value="提交订单">
        </p>
    </div>
</div>
<!-- 底部 -->
<footer>
    <div class="friend_line">
        <div class="friend mgc wh" id="friend">
        </div>
    </div>
    <div class="help_box wh mgc">
        <div class="info_box">
            <div class="help_info wh mgc">
                <div class="info_items">
                    <strong>帮助中心</strong>
                    <li><a href="#">平台流程</a></li>
                    <li><a href="#">购买流程</a></li>
                    <li><a href="#">入住流程</a></li>
                </div>
                <div class="info_items">
                    <strong>关于家政网</strong>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">服务承诺</a></li>
                    <li><a href="#">加入我们</a></li>
                </div>
                <div class="info_items">
                    <strong>服务支持</strong>
                    <li><a href="#">意见反馈</a></li>
                    <li><a href="#">合同下载</a></li>
                    <li><a href="#">网站地图</a></li>
                    <li><a href="#">服务保障</a></li>
                </div>
                <div class="info_items">
                    <strong>咨询热线</strong>
                    <li>400-465-964</li>
                    <li>周一 至 周五</li>
                    <li>09:00~21:00</li>
                </div>
            </div>
            <div class="wechat">
                <div class="wechat_img">
                    <img th:src="@{/computer/images/wechat.png}" alt="">
                    <p>家政网公众号</p>
                </div>
                <div class="wechat_img fl">
                    <img th:src="@{/computer/images/wechat.png}" alt="">
                    <p>APP下载</p>
                </div>
            </div>
        </div>
        <!-- 版权 -->
        <div class="copy mgc clfiex">
            <div class="copy_company">
                <div class="copy_text">
                    <span>Copyright ©2008-2018</span>
                    <span>家政网有限责任公司</span>
                    <span>粤ICP 备14036222号</span>
                </div>
                <div class="copy_img">
                    <img th:src="@{/computer/images/banquan1.png}" alt="">
                    <img th:src="@{/computer/images/banquan2.png}" alt="">
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- 右边导航栏 -->
<div class="nav_right">
    <ul>
        <li><a href="#"><img th:src="@{/computer/images/客服.png}" title="客服"></a></li>
        <li><a href="#"><img th:src="@{/computer/images/商家入驻.png}" title="商家入驻"></a></li>
        <li><a href="#"><img th:src="@{/computer/images/微信.png}" title="官方微信"></a></li>
        <li class="top" id="top"><a href="#cont_header">
            <img th:src="@{/computer/images/返回顶部.png}" title="返回顶部"></a>
        </li>
    </ul>
</div>
<script th:src="@{/computer/js/order.js}"></script>
</body>
</html>